import Herder from '@/components/herder'
import { useState, useEffect } from 'react'
import { resolveRoute } from '@/routes/index.tsx'
import "@arco-design/web-react/dist/css/arco.css";

function App() {
  const [currentRoute, setCurrentRoute] = useState<string>(window.location.pathname);
  const navigate = (path: string) => {
    const url = window.location.pathname
    if (path === url) return; // 如果已经在当前路由，则不跳转
    window.history.pushState(null, "", path); // 更新 URL
    setCurrentRoute(path)
  };

  // 监听 URL 变化并更新路由
  useEffect(() => {
    const handlePopState = () => {
      setCurrentRoute(window.location.pathname);
    };

    // 监听 popstate 事件（浏览器前进/后退）
    window.addEventListener("popstate", handlePopState);

    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);



  return (
    <div>
      {/* 头部 */}
      <Herder navigate={navigate} />
      {/* 主题体内容 */}
      <main>
        {resolveRoute(currentRoute)}
      </main>
      {/* 底部 */}
    </div>
  )
}

export default App
